import React,{PureComponent} from 'react';
import {HomeWrapper,HomeLeft,HomeRight,BackTop} from './styled'
import Topic from './component/Topic';
import List from './component/List';
import Recommend from './component/Recommend';
import Witer from './component/Witer';
import {connect} from "react-redux";
import {actionCreators} from './store'

//PureComponent 与 Component 区别
// PureComponent 内部底层封装了一个 shouldComponentUpdate  提高性能。
// 如果 使用了PureComponent。而没使用immutable.js 可能会遇到坑，底层原理--总之 PureComponent和immutable结合用

class Home extends PureComponent{
    handleScroll(){
        window.scrollTo(0,0);  //scrollTo() 方法可把内容滚动到指定的坐标。
    }
    render(){
        return <HomeWrapper>
            <HomeLeft>
                <img className='banner-img'  src="//upload.jianshu.io/admin_banners/web_images/4592/22f5cfa984d47eaf3def6a48510cc87c157bf293.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
                    alt=""/>
                    <Topic></Topic>
                    <List></List>
            </HomeLeft>
            <HomeRight>
                <Recommend></Recommend>
                <Witer></Witer>
            </HomeRight>
            {this.props.showScroll ?  <BackTop onClick={this.handleScroll}>回到顶部</BackTop> : null}

        </HomeWrapper>
    }


    componentWillUnmount(): void {
        window.removeEventListener('scroll',this.props.chageShowScroll)
    }

    componentDidMount(): void {
        this.props.changeList();
        this.bindEvents();
    }
    bindEvents(){
        window.addEventListener('scroll',this.props.chageShowScroll)

    }

}
const mapStateToProps=(state)=>({
    showScroll:state.getIn(['home','showScroll'])
})
const mapDispatchToProps=(dispatch)=>{
    return {
        changeList(){
            dispatch(actionCreators.getHomeInfo())
        },
        chageShowScroll(){
            if(document.documentElement.scrollTop>100){
                dispatch(actionCreators.toggleTopShow(true))
            }else{
                dispatch(actionCreators.toggleTopShow(false))
            }
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Home);